<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8">
		<title>手机号注册</title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/miva.utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/miva.components.vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

		<link rel="stylesheet" type="text/less" href="../css/entry.less" />
		<script src="../js/less.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
		<div class="register" id="app">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">手机号注册</h1>
			</header>

			<div class="mui-content">
				<div class="reg-top-tip">手机号登录需要验证你的手机号码, 该号码不会对其他人公开</div>
				<div class="form-box">
					<div class="phone-box">
						<span class="path-num">+86</span>
						<input v-model="phone" type="text" placeholder="您本人的手机号" />
					</div>
					<div class="ver-box">
						<span @tap="getVer" class="ver-btn">获取验证</span>
					</div>
					<input v-model="verCode" type="text" placeholder="请输入验证码">
					<div @tap="mivaSubmit" :class="(phone!='' && verCode!='') ? 'active' : ''" class="submit-btn">下一步</div>
					<div v-if="isTimeOut" class="time-out">{{time}}秒后可重新发送</div>
				</div>
			</div>
		</div>


		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					time: 60,
					isTimeOut: false,
					phone: '',
					verCode: '',
					params: new URLSearchParams(),
				},
				methods: {
					getVer() {
						const _this = this;
						// const params = new URLSearchParams();

						if (_this.isTimeOut) return;

						if (!/^1(3|4|5|7|8)\d{9}$/.test(this.phone)) {
							mui.toast('请输入正确的手机号!');
							return;
						}

						// post.. getVerCode 保存到 copyVerCode...
						_this.copyPhone = _this.phone;

						_this.params.append('tel', _this.phone);
						axios.post(
							mivaUtils.baseUri + '/Mobile/Index/sendCode',
							_this.params, {
								'Content-type': 'application-www-urlencoded'
							}
						).then(res => {
							// console.log(res);
							mui.toast(res.data.msg)
						})

						_this.isTimeOut = true;
						_this._timer = setInterval(function() {
							_this.time -= 1;

							if (_this.time <= 1) {
								clearTimeout(_this._timer);
								_this.isTimeOut = false;
								_this.time = 60;
							}

						}, 1000);
					},
					mivaSubmit() {
						const _this = this;
						var checkPhone = this.copyPhone != this.phone;

						//
						// if (!/^1(3|4|5|7|8)\d{9}$/.test(this.phone) || checkPhone) {
						// 	mui.toast('请输入正确的验证码!');
						// 	return;
						// }
						//
						// // test this.verCode...
						// if (this.verCode == '') {
						// 	mui.toast('请输入正确的验证码!');
						// 	return;
						// }

						// post...
						_this.params.set('code', _this.verCode)
						axios.post(
							mivaUtils.baseUri + '/Mobile/Index/sendCode',
							_this.params, {
								'Content-type': 'application-www-urlencoded'
							}
						).then(res => {
							// console.log(res);
							mui.toast(res.data.msg)
							if (res.data.code == 1) {
								mui.back()
							}
						})

					},
				},
			})
		</script>
	</body>
</html>
